<template>
    <div class="store-manager pl13-pt13">
      <div class="every-infor mt10" v-for="store in storeInfor" :key="store.index">
        <header>
          <i class="iconfont icon-fuxuankuang_xuanzhong" style="color: #41B962" v-if="selectAddress === store.id"></i>
          <i v-else class="iconfont icon-fuxuankuang_weixuanzhong" :id="store.id" @click="selectAddr(store.id)"></i>
          <p class="f16 pl10">{{store.storename}}</p>
        </header>
        <section>
          <img @click="selectStoreInfor(store)" class="ml10" src="./user_top.jpg"/>
          <aside class="ml10 pr50 flex1" @click="selectStoreInfor(store)">
            <p>联系人：{{store.name}}</p>
            <p class="mt10">电话：{{store.phone}}</p>
          </aside>
          <i class="iconfont ml20 " style="font-size: 25px; color: #525252;padding-right: 20px;" @click="deleteStore(store)">&#xe62d;</i>
        </section>
      </div>
      <footer>
        <i-button @click="addStore" type="success" send-message-path="./add-store">添加店铺</i-button>
      </footer>
      <i-modal title="删除确认" :visible="visible5" :actions="actions5">
        <view>您是否要删除{{store.storename}}</view>
        <div class="flex align-center mt10">
          <p @tap="handleClose1" class="flex1 tc f18 block">取消</p>
          <p @tap="handleOk" style="color: #41B962;" class="flex1 tc f18 block">删除</p>
        </div>
      </i-modal>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'store-manager',
        data () {
          return {
            selectAddress: 1,
            selectStores: false,
            suerOrder: {id: 1, storename: '花果园F区小龙坎火锅店', name: '好味来', phone: '15285547498'},
            storeInfor: [
              {id: 1, storename: '花果园F区小龙坎火锅店', name: '好味来', phone: '15285547498'},
              {id: 2, storename: '花果园F区小龙坎火锅店', name: 'fdsafdsa', phone: '15285547498'},
              {id: 3, storename: '花果园F区小龙坎火锅店', name: 'fdsafsdfds', phone: '15285547498'}
            ],
            visible5: false,
            store: ''
          };
        },
        methods: {
          selectStoreInfor (index) {
            this.$router.push({path: '/mine/storeManager/storeDetails', query: {pramas1: index}});
          },
          deleteStore (store) {
            this.visible5 = true;
            this.store = store;
          },
          handleClose1 () {
              this.visible5 = false;
          },
          handleOk () {
            for (let i = 0; i < this.storeInfor.length; i++) {
              if (this.storeInfor[i].id === this.store.id) {
                wx.showToast({
                  title: '删除成功！',
                  icon: 'success',
                  duration: 2000
                });
                setTimeout(()=>{
                  this.visible5 = false;
                  this.storeInfor.splice(i, 1);
                }, 4000);
              }
            }
          },
          selectAddr (id) {
            wx.showToast({
              title: '操作成功！',
              icon: 'success',
              duration: 2000
            });
            this.selectAddress = id;
          },
          addStore () {
            const url = './add-store/main';
            wx.navigateTo({ url });
          }
        }
    };
</script>

<style lang="stylus" scoped>
    .store-manager
      position absolute; top 0; left 0; width 100%; height 100%;
      footer
        position fixed; bottom 25px; width 100%;
        .mint-button--primary
          background #41B962;
        .mint-button::after
           background-color  transparent;
    .every-infor
        width 100%; border-radius 3px; background-color #fff;
        header
          display flex; align-items center; margin 0 20px; height 50px; border-bottom 1px solid #e6e6e6;
        section
          padding 15px 0; display flex; align-items center;
          img
            width 60px; border 2px solid #f7f7f7; border-radius 50%; height 60px;
          aside
            font-size 14px; color #898989;
          i
            font-size 26px;
</style>
